<template>
	<view>
		<swiper class="swiper" @change="getCurrent" :indicator-dots="true"  indicator-color="#ffc2b8" indicator-active-color="#ff6262">
			<swiper-item v-for="(item,index) in list" :key="index">
				<view class="swiper-item">
					<image class="img" :src="item.guideImage" mode="widthFix"></image>
					<view class="title_group">
						<text class="title">{{item.guideHeadlineImage}}</text>
						<text class="subTitle">{{item.guideSubheadImage}}</text>
					</view>
					<view class="btn_con" v-show="isShow">
						<view class="btn" @click="setIntroFlag">
							<image class="img" src="/static/intro/button@2x.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
			</swiper-item>
			
		</swiper>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShow:false,
			list:[]
		};
	},
	methods: {
		getCurrent(e){
			console.log(e)
			if(e.detail.current==this.list.length-1){
				console.log("ok")
				this.isShow=true
			}else{
				this.isShow=false
			}
		},
		getIntroData() {
			// console.log('1111');
			this.$request('/comic-time/guideImage').then(res => {
				this.list=res.data
				console.log(res);
			});
		},
		getintroFlag() {
			try {
				const value = uni.getStorageSync('introFlag');
				if (value) {
					// console.log(value)

					uni.switchTab({
						url: '/pages/index/index'
					});
				} else {
					console.log('11');
					this.getIntroData();
				}
			} catch (e) {
				// error
				console.log(e);
			}
		},
		setIntroFlag() {
			uni.switchTab({
				url: '/pages/index/index'
			});
				// uni.setStorage({
				// 	key:"introFlag",
				// 	data:true,
				// })
				
		},
		removeIntroFlag() {
			uni.removeStorage({
				key: 'introFlag',
				success(res) {
					console.log(res);
				}
			});
		}
	},
	onLoad() {
		this.getintroFlag();
		// this.getIntroData()
		// this.setIntroFlag()
		// this.removeIntroFlag()
	}
};
</script>

<style lang="scss" scoped>
.swiper{
	width: 100vw;
	height: 100vh;
	// background-color: red;
	.swiper-item{
		height: 100%;
		background-color: white;
		padding-top: 180rpx;
		// background-color: #000000;
		.img{
			width: 100%;
			margin-bottom: 122rpx;
		}
		.title_group{
			width: 100%;
			color: #ff6262;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 60rpx;
			.title{
				font-size: 44rpx;
				font-weight: bold;
				line-height: 33rpx;
				margin-bottom: 20rpx;
			}
			.subTitle {
				font-size: 28rpx;
			}
		}
		.btn_con{
			width: 100%;
			display: flex;
			justify-content: center;
			.btn {
				width: 223rpx;
				height: 80rpx;
				background-color: #ff6262;
				border-radius: 40rpx;
				animation: btncomic 1s ; 
			}
		}
		
	}
}
 /deep/.uni-swiper-dots-horizontal{
	bottom: 50rpx;
};

@keyframes btncomic{
	0% {
		opacity: 0;
	}
	100% {
		opacity: 100%;
	}
}

</style>
